<!DOCTYPE html>

<html>

<head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html" charset="${_response_encoding}">

        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/style.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/dates.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery-ui-1.8.16.custom.css'}">        
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/validationEngine.jquery.css'}" type="text/css"/>

    <!--
        <link rel="stylesheet" media="screen" href="@{'/public/javascripts/stars/jquery.rating.css'}">

        -->


        #{get 'moreStyles' /}

        #{get 'moreScripts' /}

        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">

        <script src="@{'/public/javascripts/jquery-1.6.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>

        <script src="@{'/public/javascripts/jquery.validationEngine-en.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>


        <script src="@{'/public/javascripts/jquery-ui-1.8.16.custom.min.js'}" type="text/javascript"></script>
        <script src="@{'/public/javascripts/sessvars.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/datepicker.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/timerpicker.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/jquery.timeago.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/new_service.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/new_service.js'}" type="text/javascript" charset="${_response_encoding}"></script>

<script>
    //Renan's fancy stuff

    $(document).ready(function() {
        $("span#timeago").timeago();

        $('div#messages_console').delay(5000).slideUp(); 

        $('#logout_button').click(function() {
            $('#logout_form').submit();
        });

        $('#submit_edit_profile_form').click(function() {
            $('#edit_profile_form').submit();
        });

        // SOME KIND OF AN EASTER EGG

        $('#the_team').click(function() {
            $('.people').fadeToggle();
            $('.no_people').fadeToggle();
        });


        $('#toggle_add_new_service_panel').click(function() {
            #{if user?.registration}
                $('#add_new_service_panel').slideToggle();
                $('#add_new_service_form').validationEngine('hideAll');
            #{/if}
        });



        $('#toggle_user_options').click(function() {
            #{if user?.registration}
                $('#user_options').slideToggle();
            #{/if}
            #{else}
                $('#login_logout_panel').slideToggle();
                $('#login_form').validationEngine('hideAll');
            #{/else}
        });
        
        
        $('#toggle_message_options').click(function() {
            #{if user?.registration}
                $('#messageBox_options').slideToggle();
            #{/if}
        });

        $("#login_form").validationEngine({promptPosition : "centerRight", scroll: false});
        $("#add_new_service_form").validationEngine({promptPosition : "centerRight", scroll: false});
        $("#signup_form").validationEngine({promptPosition : "centerRight", scroll: false});
        $("#advanced_search_form").validationEngine({promptPosition : "centerRight", scroll: false});
        $("#quick_search_form").validationEngine({promptPosition : "bottomLeft", scroll: false});
    });

    function checkPassword(field, rules, i, options){
        if (field.val().search("^.*(?=.*[a-z])(?=.*[A-Z])(?=.*[\\d]).*$")) {
            return options.allrules.validate2fields.alertText;
        }
    }


    // DATE RANGE PICKER

        $(function () {
            var postStartDate2 = $('#postStartDate2');
            var postEndDate2 = $('#postEndDate2');

            postStartDate2.datepicker({ onClose: clearEndDate2 });
            postEndDate2.datepicker({ beforeShow: setRange2 });

            function setRange2() {
                var minDate2 = postStartDate2.datepicker('getDate');
                var maxDate2 = postStartDate2.datepicker('getDate');
                maxDate2.setMonth(maxDate2.getMonth() + 1);

                return {
                    minDate: minDate2,
                    maxDate: maxDate2
                }
            }

            //Clears the end date textbox
            function clearEndDate2(dateText, inst) {
                postEndDate2.val('');
            }
            var date = new Date();
            $("#postStartDate2").datepicker("option", "minDate", date);
        });



        // DATE PICKER WITH TIME
/*
    $(document).ready(function() {

$('#postStartDate2').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#postEndDate2');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#postEndDate2').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#postEndDate2').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#postStartDate2');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#postStartDate2').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});

        });

*/





        // DEFAULT DATE IS TODAY
        var myDate = new Date();
        var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
                myDate.getFullYear();
        $("#date_pretty").val(prettyDate);



        // DATE RANGE FOR DETAILED SEARCH
        $(function () {
            var searchStartDate2 = $('#searchStartDate2');
            var searchEndDate2 = $('#searchEndDate2');

            searchStartDate2.datepicker({ onClose: clearEndDate2 });
            searchEndDate2.datepicker({ beforeShow: setRange2 });

            function setRange2() {
                var minDate2 = searchStartDate2.datepicker('getDate');
                var maxDate2 = searchStartDate2.datepicker('getDate');
                minDate2.setMonth(maxDate2.getMonth() - 12 );

                return {
                    minDate: minDate2,
                    maxDate: maxDate2
                }
            }

            //Clears the end date textbox
            function clearEndDate2(dateText, inst) {
                searchEndDate2.val('');
            }
            var date = new Date();
            $("#searchStartDate2").datepicker("option", "maxDate", date);
        });



</script>



    <!--
    <script src="@{'/public/javascripts/stars/jquery.js'}" type="text/javascript"/>
    <script src="@{'/public/javascripts/stars/jquery.MetaData.js'}" type="text/javascript"/>


    <script src="@{'/public/javascripts/stars/jquery.rating.pack.js'}" type="text/javascript" />
    <script src="@{'/public/javascripts/stars/jquery.rating.js'}" type="text/javascript"/>
        -->

        #{get 'moreScripts' /}

    </head>

    <body>
    #{if flash.error}
        <div id="messages_console" class="notification">
            ${flash.error}
        </div>
    #{/if}




        <!-- Menu Bar-->
        <div id="top_bar">
            <div id="top_bar_content">




            <!-- Add New Service Start -->
            <div id="add_new_service_panel" class="shadow">

            <div id="add_new_service_left_panel">

                
                <p class="table_title_2">Add a New Service</p>

                <form id="add_new_service_form" action="/services/postnewservice" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" >

                #{field 'title'}
                    <div class="signupelement">
                        <label class="signuptitle">Title</label><br>                                                           
                        <input id="service_title" class="validate[required, minSize[3]]" type="text" name="${field.name}" tabindex="1" class="new_post_title" value="${flash.title}"/>
                        <span class="error">#{error 'title' /}</span>
                    </div>
                #{/field}


                #{field 'description'}
                    <div class="signupelement">
                        <label class="signuptitle">Description</label><br>
                        <textarea id="service_description" name="${field.name}" class="validate[required, minSize[3]]">${flash.description}</textarea>
                        <span class="error">#{error 'description' /}</span>
                    </div>
                #{/field}
                <br/>


                #{field 'tag'}
                    <div class="signupelement">
                        <label class="signuptitle">Tags</label><br>
                        <input id="sercice_tag" name="${field.name}" class="validate[required, minSize[3]]">${flash.tag}</textarea>
                        <span class="error">#{error 'tag' /}</span>
                    </div>
                #{/field}
                <br/>












                <input type="checkbox" name="date" id="cBoxAddDate"> Add Date</input>

                #{field 'startdate'}
                    <div class="signupelement" id="div_startdate">
                        <label class="signuptitle">Start Date</label><br>
                        <input name="startdate" class="dateClass" type="text" id="postStartDate2" value="${flash.startdate}">
                        </input>
                    </div>
                #{/field}


                #{field 'enddate'}
                    <div class="signupelement" id="div_enddate">
                        <label class="signuptitle">End Date</label><br>
                        <input name="${field.name}" class="dateClass" value="${flash.enddate}" id="postEndDate2" type="text">
                        </input>
                    </div>
                #{/field}

                <div class="signupelement add_new_service_button">
                    <input type="image" src="@{'/public/images/add_service.png'}" name="SignUp" value="Sign Up"/>
                </div>
            </div>

            <div id="add_new_service_right_panel">

                <!-- Location -->
                <br/>
                <input type="checkbox" id="cBoxAddLocation"> Add Location</input>

                
                #{field 'city'}
                    <div class="signupelement" id="div_sehir">
                        <label class="signuptitle">City</label><br>
                        <select id="sehirler" name="${field.name}" onchange="javascript:fetchIlceler()">
                            #{list sehirler, as:'sehir'}
                            <option value="${sehir.id}">${sehir.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}


                #{field 'ilce'}
                    <div class="signupelement" id="div_ilce">
                        <label class="signuptitle">District</label><br>

                        <select id="ilceler" name="${field.name}" onchange="javascript:fetchSemtler(ilceler.selectedIndex)">
                            #{list ilceler, as:'ilce'}
                            <option value="${ilce.id}">${ilce.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}


                #{field 'semt'}
                    <div class="signupelement" id="div_semt">
                        <label class="signuptitle">Neighborhood</label><br>

                        <select id="semtler" name="${field.name}">
                            #{list semtler, as:'semt'}
                            <option value="${semt.id}">${semt.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}


                <!-- Periyodik Info -->
                <br/>
                <input type="checkbox" id="cBoxPeriodicalInfo"> Add Periodical Information</input>

                #{field 'fromDay'}
                    <div class="signupelement" id="div_fromDay">

                        <label class="signuptitle">Please choose day range for your service</label><br>

                        <select id="from_days" name="${field.name}">
                            <option value="Anyday">-</option>
                            <option value="Anyday">Anyday</option>
                            <option value="Everyday">Everyday</option>
                            <option value="Monday">Monday</option>
                            <option value="Tuesday">Tuesday</option>
                            <option value="Wednesday">Wednesday</option>
                            <option value="Thursday">Thursday</option>
                            <option value="Friday">Friday</option>
                            <option value="Saturday">Saturday</option>
                            <option value="Sunday">Sunday</option>
                        </select>

                        <span class="error">#{error 'location' /}</span>
                    </div>
                #{/field}

                #{field 'toDay'}
                    <div class="signupelement" id="div_toDay">

                        <!--<label class="signuptitle">To</label><br>-->

                        <select id="to_days" name="${field.name}">
                            <option value="-">-</option>
                            <option value="Monday">Monday</option>
                            <option value="Tuesday">Tuesday</option>
                            <option value="Wednesday">Wednesday</option>
                            <option value="Thursday">Thursday</option>
                            <option value="Friday">Friday</option>
                            <option value="Saturday">Saturday</option>
                            <option value="Sunday">Sunday</option>
                        </select>

                        <span class="error">#{error 'location' /}</span>
                    </div>
                #{/field}

                #{field 'betweenFrom'}
                    <div class="signupelement" id="div_between_from">

                        <label class="signuptitle">Please choose time range for your service</label><br>

                        <select id="fromBetween" name="${field.name}">
                            <option value="-">-</option>
                            <option value="06:00">06:00</option>
                            <option value="07:00">07:00</option>
                            <option value="08:00">08:00</option>
                            <option value="09:00">09:00</option>
                            <option value="10:00">10:00</option>
                            <option value="11:00">11:00</option>
                            <option value="12:00">12:00</option>
                            <option value="13:00">13:00</option>
                            <option value="14:00">14:00</option>
                            <option value="15:00">15:00</option>
                            <option value="16:00">16:00</option>
                            <option value="17:00">17:00</option>
                            <option value="18:00">18:00</option>
                            <option value="19:00">19:00</option>
                            <option value="20:00">20:00</option>
                            <option value="21:00">21:00</option>
                            <option value="22:00">22:00</option>
                            <option value="23:00">23:00</option>
                            <option value="24:00">24:00</option>
                            <option value="01:00">01:00</option>
                            <option value="02:00">02:00</option>
                            <option value="03:00">03:00</option>
                            <option value="04:00">04:00</option>
                            <option value="05:00">05:00</option>
                        </select>

                        <span class="error">#{error 'location' /}</span>
                    </div>
                #{/field}

                #{field 'betweenTo'}
                    <div class="signupelement" id="div_between_to">

                        <!--<label class="signuptitle">And</label><br>-->

                        <select id="toBetween" name="${field.name}">
                            <option value="-">-</option>
                            <option value="06:00">06:00</option>
                            <option value="07:00">07:00</option>
                            <option value="08:00">08:00</option>
                            <option value="09:00">09:00</option>
                            <option value="10:00">10:00</option>
                            <option value="11:00">11:00</option>
                            <option value="12:00">12:00</option>
                            <option value="13:00">13:00</option>
                            <option value="14:00">14:00</option>
                            <option value="15:00">15:00</option>
                            <option value="16:00">16:00</option>
                            <option value="17:00">17:00</option>
                            <option value="18:00">18:00</option>
                            <option value="19:00">19:00</option>
                            <option value="20:00">20:00</option>
                            <option value="21:00">21:00</option>
                            <option value="22:00">22:00</option>
                            <option value="23:00">23:00</option>
                            <option value="24:00">24:00</option>
                            <option value="01:00">01:00</option>
                            <option value="02:00">02:00</option>
                            <option value="03:00">03:00</option>
                            <option value="04:00">04:00</option>
                            <option value="05:00">05:00</option>
                        </select>

                        <span class="error">#{error 'location' /}</span>
                    </div>
                #{/field}



                </form>
            </div>
            </div>

            #{if flash.success}
            <div class="container">
                <p id="status" align="center">
                    <b>${flash.success}</b>
                </p>
            </div>
            #{/if}
            <!-- Add New Service Stop -->















                <!-- User Options, only seen when toggled -->
                     <!-- Login Box floating! -->
                     #{if user?.registration}
                        <div id="user_options">
                            <div class="user_menu_item">
                                <a href="@{Application.profile()}">Profile</a>
                            </div>

                            <div class="user_menu_item">
                                <form id="edit_profile_form" action="/editprofile" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded"> 
                                <a href="#" id="submit_edit_profile_form">Edit Profile</a>

                                </form>
                            </div>

                            <div class="user_menu_item">
                                #{logoutbar /}
                            </div>
                        </div>
                    #{/if}
                    #{else}
                        <div id="login_logout_panel">

                            #{loginbar /}

                            <div id="sign_up_box">
                                    <div id="signup_container">

                                    <p class="table_title_2">Join give2get</p>

                                    <form id="signup_form" action="/signup" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" >

                                    #{field 'email'}
                                        <div class="signupelement">
                                            <label class="signuptitle">Email</label><br>
                                            <input class="validate[required,custom[email]]" id="signup_email" type="text" name="${field.name}" size="30" value="${flash.email}"/>
                                            <span class="error">#{error 'email' /}</span>
                                        </div>
                                    #{/field}


                                    #{field 'firstname'}
                                        <div class="signupelement">
                                            <label class="signuptitle">First Name</label><br>
                                            <input class="validate[required]" id="signup_firstname" type="text" name="${field.name}" size="30" value="${flash.firstname}"/>
                                            <span class="error">#{error 'firstname' /}</span>
                                        </div>
                                    #{/field}


                                    #{field 'lastname'}
                                        <div class="signupelement">
                                            <label class="signuptitle">Last Name</label><br>
                                            <input class="validate[required]" id="signup_lastname" type="text" name="${field.name}" size="30" value="${flash.lastname}"/>
                                            <span class="error">#{error 'lastname' /}</span>
                                        </div>
                                    #{/field}


                                    #{field 'password'}
                                        <div class="signupelement">
                                            <label class="signuptitle">Password</label><br>
                                            <input class="validate[required,minSize[6],maxSize[12],funcCall[checkPassword]]" id="signup_password" type="password" name="${field.name}" size="30"/>
                                            <span class="error">#{error 'password' /}</span>
                                        </div>
                                    #{/field}
                                        <div class="signupelement">
                                            <label class="signuptitle">Password Again</label><br>
                                            <input class="validate[required,equals[signup_password],minSize[6]]" id="signup_password_repeat" type="password" name="password_repeat" size="30"/>
                                            <span class="error">#{error 'password' /}</span>
                                        </div>



                                        <div class="signupelement float_right">
                                            <input type="image" src="@{'/public/images/sign_up.png'}" name="SignUp" value="Sign Up"/>
                                        </div>

                                    </div>
                            </div>
                        </div>
                    #{/else}

			<!-- User Options, only seen when toggled -->
                        <div id="messageBox_options">
                            <div class="messageBox_menu_item">
                                <a href="@{MessageController.inbox(session.get("userid"))}">Inbox (${unreadMessageCount})</a>
                            </div>

                            <div class="messageBox_menu_item">
                                <a href="@{MessageController.getNotificationDetail()}">Notification (${unreadNotificationCount})</a>
                            </div>
                        </div>
                        

             <!-- Search -->
             <form id="quick_search_form" action="/search" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" >
                <input id="search_text" type="text" placeholder="Quick Search" name="keyword" alt="Search" title="Search" class="validate[custom[onlyLetterNumber], minSize[3]]"/>
            </form>



                <div id="menu">

                    <div class="menu_item">
                        <!-- User Options -->
                            <div id="toggle_user_options">
                                <img src="/public/images/user_options.png"/>
                            </div>

                    </div>

                    <div class="menu_item">
                        <a href="@{Application.index()}">Home</a>
                    </div>




                #{if user?.registration}
                    <span class="menu_item">
                        <a id="toggle_add_new_service_panel" href="#">New Service</a>
                    </span>

                    <span class="menu_item">
                        <a href="@{Services.list()}">List Services</a>
                    </span>

                    <span class="menu_item">
                        <a id="toggle_message_options" href="#">MessageBox</a>
                    </span>

                    <span class="menu_item">
                        <a id="the_team" href="#">The Team</a>
                    </span>

                    <!--span class="menu_item">
                        <a href="@{AdvancedSearch.index()}">Advanced Search</a>
                    </span-->

                #{/if}
                </div>

            </div>



        </div>


    <div id="master_container">

        <div id="header">

            <div id="logo">
                <a class="nolink" href="@{Application.index()}">
                    <img class="nolink" src="/public/images/give_2_get_logo.png" />
                </a>
            </div>

            <div id="char_1" class="no_people">
                <img src="/public/images/teach_piano.png" />
            </div>

            <div id="char_2" class="no_people">
                <img src="/public/images/give_books.png" />
            </div>

            <div id="char_3" class="no_people">
                <img src="/public/images/walk_dogs.png" />
            </div>

            <div id="char_4" class="no_people">
                <img src="/public/images/need_books.png" />
            </div>

            <div id="char_5" class="no_people">
                <img src="/public/images/want_toys.png" />
            </div>

            <div id="char_6" class="no_people">
                <img src="/public/images/teach_me.png" />
            </div>

            <!-- THE TEAM -->
            <div id="char_1" class="people">
                <img src="/public/images/can.png" />
            </div>

            <div id="char_2" class="people">
                <a href="http://cakirerk.org">
                <img src="/public/images/renan.png" />
                </a>
            </div>

            <div id="char_3" class="people">
                <img src="/public/images/beril.png" />
            </div>

            <div id="char_4" class="people">
                <img src="/public/images/orcun.png" />
            </div>

            <div id="char_5" class="people">
                <img src="/public/images/cem.png" />
            </div>

            <div id="char_6" class="people">
                <img src="/public/images/durukan.png" />
            </div>

        <div/>




        <!-- Content -->
        <div id="content">

            <div>
            #{doLayout /}
            </div>
        </div>

    </div>


    </body>

    <script>
    </script>


</html>
